<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Angular Enterprise Seed</a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>


    <div id="top-nav" class="navbar-collapse collapse">

        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-gift glyphicon-white"></i>
                    Widgets
                    <b class="caret"></b>
                </a>

                <ul class="dropdown-menu">
                   <!-- <li><a href="#/playground/accordion">Accordion</a></li>  BROKE WITH Bootstrap 3 Upgrade -->
                    <li><a href="#/playground/ace">Ace Editor</a></li>

                    <li><a href="#/playground/codec">Codec Service</a></li>
                    <li><a href="#/playground/configure">Configuration</a></li>
                    <li><a href="#/playground/date">Date</a></li>
                    <li><a href="#/playground/datagrid">Data grid</a></li>

                    <li><a href="#/playground/pagination">Pagination</a></li>
                    <li><a href="#/playground/portlet">Portlet</a></li>
                    <li><a href="#/playground/progress">Progress bars</a></li>
                    <li><a href="#/playground/retro">Retro</a></li>
                    <li><a href="#/playground/tabs">Tabs</a></li>
                    <li><a href="#/playground/tooltips">Tooltips</a></li>
                    <li><a href="#/playground/tree">Tree</a></li>
                </ul>
            </li>
        </ul>



        <div class="nav navbar-form pull-right">
            <div ng-show="!authService.isLoggedIn()">
                <a href="#loginModal" role="button" class="btn btn-primary" data-toggle="modal">
                    <i class="glyphicon glyphicon-user glyphicon-white"></i> Sign in</a>
            </div>
            <div ng-show="authService.isLoggedIn()">
                <a class="btn btn-primary" ng-click="authService.logout()">
                    <i class="glyphicon glyphicon-off glyphicon-white"></i> Sign out</a>
            </div>
        </div>

        <div ng-show="authService.isLoggedIn()">
            <ul class="nav navbar-nav pull-right">

                <li ng-show="authService.isLoggedIn()" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="glyphicon glyphicon-user glyphicon-white"></i>

                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="#/">User Profile</a></li>
                        <li><a href="#/">Change password</a></li>
                    </ul>
                </li>

            </ul>

        </div>

    </div>
</nav>

<div class="modal" id="loginModal" fade-in>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <span id="login-email">Email</span>
                <input ng-model="loginInput" type="text" placeholder="Email" name='username'>
                <span id="login-password">Password</span>
                <a href="#">Forgot password?</a>
                <input ng-model="passwordInput" type="password" placeholder="Password" name='password'>
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary" data-dismiss="modal" ng-click="authService.login(loginInput, passwordInput)">
                    <i
                            class="glyphicon glyphicon-user glyphicon-white"></i>Log in</a>
            </div>
        </div>
    </div>
</div>
